<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>数据显示区</title>
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<style type="text/css">
			html,
			body {
				padding: 0;
				margin: 0;
				height: 100%;
			}
			
			.data_area {
				width: 100%;
				height: 100%;
				/*background: #E5E5E5;*/
			}
			
			.data_area_head {
				height: 40px;
				background: #E5E5E5;
				line-height: 40px;
				color: white;
				padding-left: 12px;
			}
			
			.data_area_content {
				height: 500px;
				margin: 12px;
			}
			
			textarea {
				outline: none;
				resize: none;
				height: 100%;
				width: 98.5%;
				font-size: 16px;
				color: black;
				border: 0;
				border-radius: 5px;
				background-color: white;
				/*rgba(241, 241, 241, .98);*/
				padding: 10px;
				line-height: 30px;
			}
			
			.hide_btn_div {
				position: absolute;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				top: 0;
				left: 0;
				display: none;
			}
			
			.data_input_div {
				height: 32%;
				width: 50%;
				margin-left: 25%;
				margin-right: 25%;
				margin-top: 5%;
				background: #FFFFFF;
				border-radius: 5px;
			}
			
			.data_input_div_f {
				font-size: 16px;
				color: #FFFFFF;
				height: 45px;
				background: #008EBC;
				line-height: 45px;
				padding-left: 5px;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
			}
			
			.data_input_div_s {
				margin-top: 30px;
				margin-bottom: 30px;
				padding-left: 12px;
				padding-right: 12px;
			}
			
			.data_input_div_s input {
				width: 100%;
				height: 40px;
				font-size: 16px;
			}
			
			.data_input_div_t {
				text-align: center;
			}
			
			.data_input_div_t button {
				height: 40px;
				outline: none;
				border: none;
				border-radius: 5px;
				width: 80px;
			}
			
			.data_input_div_t button:nth-child(2) {
				background: #bc0000;
				color: white;
				margin-left: 50px;
			}
		</style>
	</head>

	<body>
		<div class="data_area">
			<div class="data_area_head">
				<button onclick="show_tip()" >点击开始分析</button>
			</div>
			<div class="data_area_content">
				<textarea id="data_content" placeholder="后台小黄人正在努力搬运，请耐心稍等片刻……"></textarea>
			</div>
		</div>
		<div id="hide_btn_div" class="hide_btn_div">
			<div class="data_input_div">
				<div class="data_input_div_f">提示</div>
				<div class="data_input_div_s">
					<input type="text" id="file_path" placeholder="请输入HDFS上日志的路径" />
				</div>
				<div class="data_input_div_t">
					<button onclick="hide_tip()">取消</button>
					<button onclick="analysis()">确定</button>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			function hide_tip() {
				$("#hide_btn_div").hide();
			}

			function show_tip() {
				$("#hide_btn_div").show();
			}

			function analysis() {
				//获取输入路径
				var urlPath = $("#file_path").val();
				if(urlPath == null || urlPath == "") {
					alert("请输入文件的路径");
					return;
				}
				//隐藏对话框
				hide_tip();

				var inputJson = {
					path: urlPath
				}

				//根据商品id查询商品信息
				$.ajax({
					url: "/university/goods/dataAnalysis",
					type: "POST",
					data: inputJson,
					dataType: "json",
					success: function(ret) {
						alert(ret.message);
						if(ret.status == "1") {
							var obj = ret.data; //先给input标签赋值
							$("#data_content").val(obj);
							return;
						}
						//失败
						$("#data_content").val(ret);
					},
					error: function(response) {
						alert(JSON.stringify(response));
						$("#data_content").val(JSON.stringify(response));
					}
				});
			}
		</script>
	</body>

</html>